<template>
  <div>
    <el-card>
      <div class="noptice-header flex items-center justify-between">
        <div>
          <el-button type="primary" size="small" @click="createClick"
            >新增</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="delAllClick"
            :disabled="ids.length === 0"
            >批量删除</el-button
          >
        </div>
        <el-button type="primary" size="small" @click="getData">
          <el-icon>
            <Refresh />
          </el-icon>
        </el-button>
      </div>
      <el-table :data="tableList" @selection-change="handleDeleteAll">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="规则名称"></el-table-column>
        <el-table-column prop="default" label="规格值"></el-table-column>
        <el-table-column prop="order" label="排序"></el-table-column>
        <el-table-column label="状态" width="280">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              @change="statusChange(row)"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              text
              type="primary"
              size="small"
              @click="editNoticeClick(scope.row)"
              >修改</el-button
            >
            <el-popconfirm
              title="是否要删除该角色？"
              confirmButtonText="确认"
              cancelButtonText="取消"
              @confirm="handleDelete(scope.row.id)"
            >
              <template #reference>
                <el-button text type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex items-center justify-center mt-3">
        <el-pagination
          background
          layout="prev, pager,next"
          :total="total"
          :current-page="page"
          :page-size="limit"
          @current-change="changePage"
        />
      </div>
    </el-card>

    <Drawer
      ref="DrawerRef"
      :title="title === 'add' ? '添加规格' : '修改规格'"
      @submit="submit"
    >
      <el-form
        ref="formRef"
        :model="fromData"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="规格名称" prop="name">
          <el-input v-model="fromData.name" placeholder="请输入规格名称" />
        </el-form-item>
        <el-form-item label="排序" prop="order">
          <el-input-number v-model="fromData.order" :min="1" :max="1000" />
        </el-form-item>
        <el-form-item label="角色状态" prop="status">
          <el-switch
            v-model="fromData.status"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="规格值" prop="default">
          <TagInput v-model="fromData.default"></TagInput
        ></el-form-item>
      </el-form>
    </Drawer>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Toast } from "@/utils/utils";
import Drawer from "@/components/Drawer/index.vue";
import TagInput from "@/components/Tag/index.vue";
import { changStatus, getSkuList, addSku, editSku, delSkus } from "@/api/skus";
import { useInitTable, useInitForm } from "@/composables/useCommon.js";
const {
  tableList,
  page,
  total,
  limit,
  getData,
  changePage,
  handleDelete,
  statusChange,
  ids,
  handleDeleteAll,
  delAllClick,
} = useInitTable({
  getList: getSkuList,
  del: delSkus,
  status: changStatus,
});

const {
  fromData,
  title,
  formRef,
  rules,
  DrawerRef,
  createClick,
  submit,
  editNoticeClick,
} = useInitForm({
  fromData: {
    name: "",
    status: 1,
    order: 0,
    default: "",
  },
  create: addSku,
  updata: editSku,
  getData: getData,
  // rules: {
  //   title: [{ required: true, message: "请输入公告标题", trigger: "blur" }],
  //   content: [{ required: true, message: "请输入公告内容", trigger: "blur" }],
  // },
});
</script>
